<template>
  <div class="history-main">
    <!-- 通用头部 -->
    <div class="com-header history-header">
        <button class="back" @click="$router.go(-1)"><i></i></button>
        <span>{{searchStr}}</span>
    </div>
    <!-- 网页内容区域 -->
    <div class="view-content" :class="{'searchDetaiView':!haveData}">
       <div class="wrapper">
            <ul v-if="haveData">
                <router-link tag="li" :to="'/novelDetail/'+item.novelid" v-for="(item,index) in dataArray" :key="index">
                    <div class="left"><img :src="item.cover" :alt="item.name"></div>
                    <div class="right">
                        <p class="ellipsis title">{{item.name}}</p>
                        <p class="ellipsis">{{item.author}}</p>
                        <p class="ellipsis">{{item.intro}}</p>
                        <p class="ellipsis">{{item.readernum}}人在追 | {{item.novelRetain}}读者留存</p>
                    </div>
                </router-link>
            </ul>
            <div class="no-wrapper" v-if="!haveData">
                <p>没有搜索到相关内容</p>
            </div>
       </div>
    </div>
  </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import api from '~/plugins/api.js'
    import axios from 'axios'
    import storage from 'localforage'
    export default {
        head: {
            title: '浏览历史  - 快眼看书',
            meta: [{
                name: 'description',
                content: '快眼看书专注于玄幻小说搜索,新版快眼看书,提供最全的小说保持最快的更新,方便大家愉快地阅读玄幻小说'
            },{
                name: 'keyWords',
                content: '浏览历史,快眼看书'
            }]
        },
        data () {
            return {
               searchDataArray: [],
               searchStr: '',
               dataArray: [],
               haveData: true
            }
        },
        mounted() {
            this.submit()
        },
        methods: {
            async submit() {
                this.searchDataArray = await storage.getItem('searchDataKey') || []
                this.searchStr = this.$route.query.searchStr
            
                Array.prototype.remove = function(val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if(this.searchStr!=''){
                    this.searchDataArray.remove(this.searchStr)
                    this.searchDataArray.unshift(this.searchStr)
                    if(this.searchDataArray.length>15){
                        this.searchDataArray.pop()
                    }
                    storage.setItem('searchDataKey',this.searchDataArray)
                }
                
                let paramsData = {
                    keyword: this.searchStr,
                    type: '',
                    page: '1',
                    limit: '100'
                }
                let res = await axios.get(api.search,{params: paramsData})
                if(res){
                    this.dataArray = res.data.data.data
                    this.haveData = this.dataArray.length==0 ? false : true
                }
            }
        }
    }
</script>
<style lang="scss">
    .wrapper{
        border-bottom: 0 solid #ebebeb!important;
    }
    .searchDetaiView{
        background: #eeeef3!important;
        .wrapper{
            border-bottom: 0 solid #ebebeb;
            .no-wrapper{
                margin-top: 5rem;
                color: #cccccc;
                p{
                    font-size: .48rem;
                    color: #cccccc;
                    text-align: center;
                }
            }
        }
        
    }
</style>

